<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>FlowCss - Utilities</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes"> 
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="description" content="redefining standard browser style standards" />
    <meta name="keywords" content="reset css, reset styles of browser, css reset"/>
	<meta name="robots" content="index, follow">
    <link rel="stylesheet" href="../../../css/flowcss.css">
</head>
<body>
  
  <section class="container py-30">
  <h1 class="mb-30 text-left">Backgrounds</h1>
  <div class="mb-10 bg-blue-5 p-10 color-white">Its background blue</div>
  <div class="mb-10 bg-red-5 p-10 color-white">Its background red</div>
  <div class="mb-10 bg-orange-5 p-10 color-white">Its background orange</div>
  <div class="mb-10 bg-green-5 p-10 color-white">Its background green</div>
  <div class="mb-10 bg-indigo-5 p-10 color-white">Its background indigo</div>
  <div class="mb-10 bg-pink-5 p-10 color-white">Its background pink</div>
  <div class="mb-10 bg-cyan-5 p-10 color-white">Its background cyan</div>
  <div class="mb-10 bg-violet-5 p-10 color-white">Its background violet</div>
  
  <h1 class="mtb-30 text-left">Utilities for typography</h1>

  <h3 class="color-blue-5">Class color</h3>
  <h3 class="color-red-5">Class color</h3>
  <h3 class="color-indigo-5">Class color</h3>
  <h3 class="color-orange-5">Class color</h3>
  <h3 class="color-violet-5">Class color</h3>
  <h3 class="color-yellow-5">Class color</h3>
  <h3 class="color-cyan-5">Class color</h3>
  <h3 class="color-pink-5">Class color</h3>


  <p class="font-size-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-7">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-8">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-9">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p class="font-size-10">Lorem Ipsum is simply dummy text of the printing</p>
  <p class="font-size-11">Lorem Ipsum is simply dummy text of the printing</p>
  <p class="font-size-12">Lorem Ipsum is simply dummy text of the printing</p>
  <p class="font-size-13">Lorem Ipsum is simply dummy text of the printing</p>
  <p class="font-size-14">Lorem Ipsum is simply dummy text of the printing</p>
  <p class="font-size-15">Lorem Ipsum is simply dummy text of the printing</p>
  <p class="font-size-16">Lorem Ipsum is simply dummy text of the printing</p>
  <p class="font-size-17">Lorem Ipsum is simply dummy text of the printing</p>
  <h1 class="mtb-30 text-left">Utilities for border radius</h1>

  <div class="br-radius-1 mb-10 bg-blue-5 p-20 color-white">Its background blue</div>
  <div class="br-radius-2 mb-10 bg-red-5 p-20 color-white">Its background red</div>
  <div class="br-radius-3 mb-10 bg-orange-5 p-20 color-white">Its background orange</div>
  <div class="br-radius-4 mb-10 bg-green-5 p-20 color-white">Its background green</div>
  <div class="br-radius-5 mb-10 bg-indigo-5 p-20 color-white">Its background indigo</div>
  <div class="br-radius-6 mb-10 bg-pink-5 p-20 color-white">Its background pink</div>
  <div class="br-radius-7 mb-10 bg-cyan-5 p-20 color-white">Its background cyan</div>
  <div class="br-radius-8 mb-10 bg-violet-5 p-20 color-white">Its background violet</div>
  <div class="br-radius-9 mb-10 bg-red-5 p-20 color-white">Its background violet</div>
  <div class="br-radius-10 mb-10 bg-green-5 p-20 color-white">Its background violet</div>
  <div class="br-radius-50 mb-10 bg-yellow-5 p-20 color-white">Its background violet</div>
  
  <h1 class="mtb-30 text-left">Utilities for border types</h1>
  
  <div class="br-style-solid br-width-4 br-color-blue-2 mb-10 bg-white p-10 color-white">Its border types solid</div>
  <div class="br-style-dotted br-width-4 br-color-violet-2 mb-10 bg-white p-10 color-white">Its border types dotted</div>
  <div class="br-style-dashed br-width-4 br-color-red-2 mb-10 bg-white p-10 color-white">Its border types dashed</div>
  <div class="br-style-groove br-width-4 br-color-green-4 mb-10 bg-white p-10 color-white">Its border types groove</div>
  <div class="br-style-inset br-width-4 br-color-blue-5 mb-10 bg-white p-10 color-white">Its border types inset</div>
  <div class="br-style-outset br-width-4 br-color-indigo-4 mb-10 bg-white p-10 color-white">Its border types outset</div>
  <div class="br-style-double br-width-4 br-color-cyan-2 mb-10 bg-white p-10 color-white">Its border types double</div>
  <div class="br-style-ridge br-width-4 br-color-yellow-2 mb-10 bg-white p-10 color-white">Its border types ridge</div>
  
  </section>
</body>
</html>
